<template>
  <div class="intro">
    <div class="tip border-bottom">
      <div class="evaluate border-right">
        <p class="grade">
          <span>{{introInfo.grade}}</span>
          分 很棒
        </p>
        <p class="commit">{{introInfo.comments}}条评论</p>
      </div>
      <div class="info">
        <p class="title">景点简介</p>
        <p class="desc">开放时间、贴士</p>
      </div>
    </div>
    <div class="addr-wrapper border-bottom">
      <div class="address">
        <span class="iconfont icon-addr">&#xe63f;</span>
        {{introInfo.address}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailIntroduction",
  props: {
    introInfo: Object
  },
  mounted() {
    if (this.introInfo.address) console.log(this.introInfo);
  }
};
</script>

<style lang="stylus" scoped>
.intro
  background: #fff
  padding: 0 0.2rem
  margin-bottom: 0.05rem
  border-top-right-radius: 0.2rem
  border-top-left-radius: 0.2rem
  position: relative
  top: -0.15rem
  .tip
    padding: 0.2rem 0
    display: flex
    flex-direction: row
    height: 1.2rem
    .evaluate
      width: 50%
      height: 100%
      .grade
        font-size: 0.28rem
        color: #ff9917
        margin-top: -0.15rem
        span
          font-size: 0.44rem
      .commit
        color: #9e9e9e
        font-size: 0.24rem
        margin-top: -0.1rem
    .info
      padding-left: 0.2rem
      .title
        font-size: 0.28rem
      .desc
        font-size: 0.24rem
        color: #9e9e9e
  .addr-wrapper
    padding: 0.2rem
    .address
      font-size: 0.28rem
      overflow: hidden
    .icon-addr
      font-size: 0.36rem
      display: block
      width: 0.8rem
      height: 100%
      line-height: 0.36rem
      float: left
      text-align: center
</style>